<template>
    <el-divider />
    <el-table :data="list" {...attrs} height="600px" style="width: 100%">
      <template v-if="dataType==='arr'">      
        <template v-for="item in columns">
      <el-table-column v-if="!item.type" :prop="item.prop" :label="item.label" :width="item.width" />
      <el-table-column v-else-if="item.type==='img'"  :label="item.label" >
        <template #default="scope">
          <img :src="scope.row[item.prop]" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
    </template>
      </template>
      <template v-else-if="dataType=='str'">
        <el-table-column :label="columns[0].label" :width="columns[0].width" >
          <template #default="scope">
            <span>{{scope.row}}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </template>
    
  <script lang="ts" setup>
  import { watchEffect } from "vue";
  import {  reactive } from "vue";

  const props = defineProps({
    
    immediate:{
      type:Boolean,
      default:true
    },
    flag:String,
    listen:Object,
    getDataApi:Function,
    columns:Array,
    dataType:{
      default:"arr",
      type:String
    }
  })

// 获取数据
  const list = reactive([]);
  
  function getList() {
    props.getDataApi().then(res => {
      if (res.data.code === "200") {
        list.length = 0;
        list.push(...res.data.data);
      }
    }).catch(err => {
      console.log("获取数据失败，err", err);
    })
  }

  props.immediate && getList();

  watchEffect(()=>{
    props.listen && getList();
  })

  defineExpose({
    getList
  })

  </script>
  
  <style lang="scss" scoped>
  </style>
  